<template>
  <div class="notification-manage">
    <el-card>
      <template #header>
        <div class="page-header">
          <h2>通知管理</h2>
          <div class="header-actions">
            <el-button @click="markAllAsRead">全部已读</el-button>
            <el-button @click="refreshNotifications">刷新</el-button>
          </div>
        </div>
      </template>

      <!-- 通知类型Tab -->
      <el-tabs v-model="activeTab" class="notification-tabs">
        <el-tab-pane label="公告信息" name="announcement">
          <div class="tab-content">
            <!-- 筛选栏 -->
            <div class="filter-bar">
              <el-form :model="announcementFilter" inline>
                <el-form-item label="通知类型">
                  <el-select v-model="announcementFilter.type" clearable placeholder="选择类型" style="width: 120px;">
                    <el-option label="信息" value="info" />
                    <el-option label="警告" value="warning" />
                    <el-option label="成功" value="success" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="announcementFilter.status" clearable placeholder="选择状态" style="width: 120px;">
                    <el-option label="未读" value="unread" />
                    <el-option label="已读" value="read" />
                  </el-select>
                </el-form-item>
                <el-form-item label="关键词">
                  <el-input v-model="announcementFilter.keyword" placeholder="搜索标题或内容" style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="filterAnnouncements">查询</el-button>
                  <el-button @click="resetAnnouncementFilter">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 公告列表 -->
            <el-table :data="filteredAnnouncementList" style="width: 100%">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column label="类型" width="100">
                <template #default="scope">
                  <el-tag :type="getTypeTagType(scope.row.type)" size="small">
                    {{ getTypeName(scope.row.type) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" min-width="200" />
              <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
              <el-table-column prop="time" label="发布时间" width="180" />
              <el-table-column label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.isRead ? 'info' : 'danger'" size="small">
                    {{ scope.row.isRead ? '已读' : '未读' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                  <el-button size="small" @click="viewNotification(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="margin-top: 16px; text-align: right;">
              <el-pagination
                v-model:current-page="announcementPagination.current"
                v-model:page-size="announcementPagination.size"
                :total="announcementPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 50]"
              />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="系统异常" name="system">
          <div class="tab-content">
            <!-- 筛选栏 -->
            <div class="filter-bar">
              <el-form :model="systemFilter" inline>
                <el-form-item label="状态">
                  <el-select v-model="systemFilter.status" clearable placeholder="选择状态" style="width: 120px;">
                    <el-option label="未读" value="unread" />
                    <el-option label="已读" value="read" />
                  </el-select>
                </el-form-item>
                <el-form-item label="关键词">
                  <el-input v-model="systemFilter.keyword" placeholder="搜索标题或内容" style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="filterSystemErrors">查询</el-button>
                  <el-button @click="resetSystemFilter">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 系统异常列表 -->
            <el-table :data="filteredSystemErrorList" style="width: 100%">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column label="类型" width="100">
                <template #default="scope">
                  <el-tag type="danger" size="small">系统异常</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" min-width="200" />
              <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
              <el-table-column prop="time" label="发生时间" width="180" />
              <el-table-column label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.isRead ? 'info' : 'danger'" size="small">
                    {{ scope.row.isRead ? '已读' : '未读' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                  <el-button size="small" @click="viewNotification(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="margin-top: 16px; text-align: right;">
              <el-pagination
                v-model:current-page="systemPagination.current"
                v-model:page-size="systemPagination.size"
                :total="systemPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 50]"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 通知详情弹窗 -->
    <el-dialog
      v-model="notificationDialog.visible"
      title="通知详情"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="notificationDialog.form" class="notification-detail">
        <div class="detail-header">
          <h3 class="detail-title">{{ notificationDialog.form.title }}</h3>
          <div class="detail-meta">
            <span class="detail-time">{{ notificationDialog.form.time }}</span>
            <el-tag :type="getPriorityType(notificationDialog.form.type)" size="small" class="detail-priority">
              {{ getPriorityText(notificationDialog.form.type) }}
            </el-tag>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="content-section">
            <h4 class="section-title">通知内容：</h4>
            <p class="content-text">{{ notificationDialog.form.content }}</p>
          </div>
          
          <div v-if="notificationDialog.form.details && notificationDialog.form.details.length > 0" class="content-section">
            <h4 class="section-title">详细信息：</h4>
            <ul class="detail-list">
              <li v-for="(detail, index) in notificationDialog.form.details" :key="index">
                {{ detail }}
              </li>
            </ul>
          </div>
          
          <div v-if="notificationDialog.form.affectedFunctions && notificationDialog.form.affectedFunctions.length > 0" class="content-section">
            <h4 class="section-title">可能影响的功能：</h4>
            <ul class="detail-list">
              <li v-for="(func, index) in notificationDialog.form.affectedFunctions" :key="index">
                {{ func }}
              </li>
            </ul>
          </div>
          
          <div v-if="notificationDialog.form.remark" class="content-section">
            <h4 class="section-title">备注：</h4>
            <p class="content-text">{{ notificationDialog.form.remark }}</p>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="notificationDialog.visible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useNotificationStore, type NotificationItem } from '@/store/notification'

const notificationStore = useNotificationStore()

// 当前激活的tab
const activeTab = ref('announcement')

// 公告信息相关
const announcementFilter = reactive({
  type: '',
  status: '',
  keyword: ''
})

const announcementPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 系统异常相关
const systemFilter = reactive({
  status: '',
  keyword: ''
})

const systemPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 从store获取通知数据
const announcementList = computed(() => notificationStore.announcementList)
const systemErrorList = computed(() => notificationStore.systemErrorList)

// 过滤后的列表
const filteredAnnouncementList = computed(() => {
  let list = announcementList.value

  if (announcementFilter.type) {
    list = list.filter(item => item.type === announcementFilter.type)
  }

  if (announcementFilter.status) {
    const isRead = announcementFilter.status === 'read'
    list = list.filter(item => item.isRead === isRead)
  }

  if (announcementFilter.keyword) {
    const keyword = announcementFilter.keyword.toLowerCase()
    list = list.filter(item => 
      item.title.toLowerCase().includes(keyword) || 
      item.content.toLowerCase().includes(keyword)
    )
  }

  announcementPagination.total = list.length
  const start = (announcementPagination.current - 1) * announcementPagination.size
  return list.slice(start, start + announcementPagination.size)
})

const filteredSystemErrorList = computed(() => {
  let list = systemErrorList.value

  if (systemFilter.status) {
    const isRead = systemFilter.status === 'read'
    list = list.filter(item => item.isRead === isRead)
  }

  if (systemFilter.keyword) {
    const keyword = systemFilter.keyword.toLowerCase()
    list = list.filter(item => 
      item.title.toLowerCase().includes(keyword) || 
      item.content.toLowerCase().includes(keyword)
    )
  }

  systemPagination.total = list.length
  const start = (systemPagination.current - 1) * systemPagination.size
  return list.slice(start, start + systemPagination.size)
})

// 通知弹窗
const notificationDialog = reactive({
  visible: false,
  form: null as NotificationItem | null
})

// 工具方法
function getTypeTagType(type: string) {
  const typeMap: Record<string, string> = {
    info: '',
    warning: 'warning',
    success: 'success',
    error: 'danger'
  }
  return typeMap[type] || ''
}

function getTypeName(type: string) {
  const typeMap: Record<string, string> = {
    info: '信息',
    warning: '警告',
    success: '成功',
    error: '错误'
  }
  return typeMap[type] || '未知'
}

function getPriorityType(type: string) {
  const typeMap: Record<string, string> = {
    info: '',
    warning: 'warning',
    success: 'success',
    error: 'danger'
  }
  return typeMap[type] || ''
}

function getPriorityText(type: string) {
  const typeMap: Record<string, string> = {
    info: '普通',
    warning: '重要',
    success: '成功',
    error: '紧急'
  }
  return typeMap[type] || '普通'
}

// 筛选方法
function filterAnnouncements() {
  announcementPagination.current = 1
}

function resetAnnouncementFilter() {
  announcementFilter.type = ''
  announcementFilter.status = ''
  announcementFilter.keyword = ''
  announcementPagination.current = 1
}

function filterSystemErrors() {
  systemPagination.current = 1
}

function resetSystemFilter() {
  systemFilter.status = ''
  systemFilter.keyword = ''
  systemPagination.current = 1
}

// 通知操作方法
function viewNotification(item: NotificationItem) {
  notificationDialog.form = item
  notificationDialog.visible = true
}

function markAllAsRead() {
  notificationStore.markAllAsRead()
  ElMessage.success('已全部标记为已读')
}

function refreshNotifications() {
  ElMessage.success('刷新成功')
}

onMounted(() => {
  // 初始化分页数据
  announcementPagination.total = announcementList.value.length
  systemPagination.total = systemErrorList.value.length
})
</script>

<style scoped>
.notification-manage {
  padding: 32px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.notification-tabs {
  margin-top: 16px;
}

.tab-content {
  padding: 16px 0;
}

.filter-bar {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.filter-bar .el-form {
  margin-bottom: 0;
}

.filter-bar .el-form-item {
  margin-bottom: 0;
  margin-right: 16px;
}

.filter-bar .el-form-item:last-child {
  margin-right: 0;
}

/* 通知详情样式 */
.notification-detail {
  padding: 0;
}

.detail-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-time {
  font-size: 14px;
  color: #909399;
}

.detail-priority {
  font-size: 12px;
}

.detail-content {
  padding: 0;
}

.content-section {
  margin-bottom: 20px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.content-text {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.detail-list {
  margin: 0;
  padding-left: 20px;
}

.detail-list li {
  margin-bottom: 6px;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.detail-list li:last-child {
  margin-bottom: 0;
}
</style> 